﻿<UserControl x:Class="Flare.Controls.NetworkPoint"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:enum ="clr-namespace:Flare.Controls"
             mc:Ignorable="d" Background="Transparent" AllowDrop="False"
             HorizontalAlignment="Left" VerticalAlignment="Top"            
             
             MouseLeftButtonDown="UserControl_PreviewMouseLeftButtonDown"
             MouseMove="UserControl_MouseMove"
             MouseLeftButtonUp="UserControl_PreviewMouseLeftButtonUp"
             DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Grid x:Name="root">

        <Grid.RowDefinitions>
            <RowDefinition Height="64"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Image Grid.Row="0" HorizontalAlignment="Center" Stretch="None">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="/flare;component/Media/osa_cloud.png" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding PointType, Mode=OneWay}" Value="hub" >
                            <Setter Property="Source" Value="/flare;component/Media/osa_hub.png" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding PointType, Mode=OneWay}" Value="vpn" >
                            <Setter Property="Source" Value="/flare;component/Media/osa_vpn.png" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding PointType, Mode=OneWay}" Value="server" >
                            <Setter Property="Source" Value="/flare;component/Media/osa_server.png" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>

        <Ellipse x:Name="LedConnect" Grid.Row="0" Width="12" Height="12" Stroke="{DynamicResource ColorText}" StrokeThickness="1"
                  VerticalAlignment="Top" HorizontalAlignment="Center" Margin="2,2,50,0" PreviewMouseLeftButtonDown="LedConnect_PreviewMouseLeftButtonDown">
            <Ellipse.Style>
                <Style>
                    <Style.Resources>
                        <Storyboard x:Key="FlashEffect" AutoReverse="True" RepeatBehavior="Forever">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Fill.Color" Storyboard.TargetName="{x:Null}">
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="Transparent"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Fill.Color" Storyboard.TargetName="{x:Null}" >
                                <EasingColorKeyFrame KeyTime="0:0:0.3" Value="Red"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </Style.Resources>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsAvailable}" Value="{x:Null}">
                            <Setter Property="Ellipse.Visibility" Value="Collapsed" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsAvailable}" Value="True">
                            <Setter Property="Ellipse.Fill" Value="#FFB0F5C3" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding IsAvailable}" Value="False">
                            <Setter Property="Ellipse.Fill" Value="Red" />
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource FlashEffect}" x:Name="FlashEffect_BeginStoryboard"/>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>
        <TextBlock Text="{Binding PointName, FallbackValue=NaN}" HorizontalAlignment="Center" 
                   Foreground="{DynamicResource ColorText}"  Grid.Row="1" />
        <TextBlock Text="{Binding IP, FallbackValue=NaN}" HorizontalAlignment="Center"  FontSize="10"
                   Foreground="{DynamicResource ColorText}" Grid.Row="2" />
    </Grid>
</UserControl>
